<template>
  <div class="warp">
    <el-button type="primary" @click="toggleSelection([3, 5])">切换序号为3,5的选中状态</el-button>
    <el-button type="primary" @click="clear">清空选择</el-button>
    <div class="cover">
      <my-table class="my-table" ref="table" :data="tableData" height="500px" row-class-name="ls" pagination
                :getList="getList" :total="total" showIndexColumn
                indexColumn="1">
        <el-table-column type="selection" align="center"></el-table-column>
        <el-table-column fixed="left" min-width="100px" prop="name" label="姓名" align="center"></el-table-column>
        <el-table-column min-width="100px" prop="gender" label="性别" align="center"></el-table-column>
        <el-table-column min-width="100px" prop="age" label="年龄" align="center"></el-table-column>
        <el-table-column min-width="250px" prop="county" label="户籍地址" align="center"></el-table-column>
        <el-table-column min-width="150px" prop="phone" label="联系方式" align="center"></el-table-column>
        <el-table-column fixed="right" min-width="150px" prop="email" label="电子邮箱" align="center"></el-table-column>
      </my-table>

<!--      <el-table class="my-table" ref="table1" :data="tableData" height="500px">-->
<!--        <el-table-column type="selection" align="center"></el-table-column>-->
<!--        <el-table-column  min-width="100px" prop="name" label="姓名" align="center"></el-table-column>-->
<!--        <el-table-column min-width="100px" prop="gender" label="性别" align="center"></el-table-column>-->
<!--        <el-table-column min-width="100px" prop="age" label="年龄" align="center"></el-table-column>-->
<!--        <el-table-column min-width="250px" prop="county" label="户籍地址" align="center"></el-table-column>-->
<!--        <el-table-column min-width="150px" prop="phone" label="联系方式" align="center"></el-table-column>-->
<!--        <el-table-column min-width="150px" prop="email" label="电子邮箱" align="center"></el-table-column>-->
<!--      </el-table>-->
    </div>
  </div>
</template>

<script>
import {aipGetUserList} from '@/api/user'

export default {
  data() {
    return {
      tableData: [],
      selected: [],
      total: 0,
    }
  },
  methods: {
    // 获取用户分页列表
    getList({current, size}) {
      return aipGetUserList({current, size}).then(res => {
        this.tableData = res.data
        this.total = res.total
      })
    },

    // 清除选择
    clear() {
      this.$refs.table.clearSelection()
    },
    toggleSelection(rows) {
      if (rows) {
        const obj = this.tableData.filter((i) => rows.includes(i.id))
        obj.forEach((row) => {
          this.$refs.table.toggleRowSelection(row)
        })
      } else {
        this.$refs.table.clearSelection()
      }
    }
  }
}
</script>

<style scoped>
.warp {
  height: var(--window-vh);
  padding: 10px;
  background: #f1f1f1;
  overflow: auto;
}

.my-table {
  width: 70%;
  /*width: 1000px;*/
  margin: 0 10px;
}

.cover {
  display: flex;
}
</style>
<style>
/* 让el-table组件的滚动条动态渲染为0 */
.el-scrollbar__wrap::-webkit-scrollbar {
    display: none;
    width: 0;
}

/* 让美化后的el-table的滚动条不被遮挡 */
.el-table-scrollbar .el-scrollbar__bar {
    z-index: 999;
}
</style>
